<template>
	<view>
		<view class="custom-card" @click="toDetails">
			<view class="custom-card__body">
				<!-- 图标和温度水平排列 -->
				<view class="weather-display">
					<view class="card-icons">
						<i :class="['qi-' + weather.icon, 'weather-icons']"></i>
					</view>
					<view class="temperature-display">
						<text class="temp-text"><text style="color: red;">{{weather.temp}}</text>℃</text>
						<u-divider text=""></u-divider>
						<text class="reminder-text">多云微风，出行注意防晒保湿。</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容部分 -->
		<view class="weather-cards">
			<!-- 第一行 -->
			<view class="weather-card">
				<view class="card-icon">
					<i class="qi-1014" style="font-size: 30px;color: #4A90E2;"></i>
				</view>
				<view class="card-content">
					<text class="card-value">{{weather.humidity}} %</text>
					<text class="card-label">湿度</text>
				</view>
			</view>

			<view class="weather-card">
				<view class="card-icon">
					<i class="qi-1036" style="font-size: 30px;color: #7FB3D5;"></i>
				</view>
				<view class="card-content">
					<text class="card-value">{{weather.windSpeed}} 级</text>
					<text class="card-label">风力</text>
				</view>
			</view>

			<!-- 第二行 -->
			<view class="weather-card">
				<view class="card-icon">
					<i class="qi-1034" style="font-size: 30px;color: #FF6B6B"></i>
				</view>
				<view class="card-content">
					<text class="card-value">{{weather.feelsLike}} ℃</text>
					<text class="card-label">体感温度</text>
				</view>
			</view>

			<view class="weather-card">
				<view class="card-icon">
					<i class="qi-1040" style="font-size: 30px;color: #9B59B6"></i>
				</view>
				<view class="card-content">
					<text class="card-value">{{weather.windSpeed}} km/h</text>
					<text class="card-label">风速</text>
				</view>
			</view>
		</view>

		<!-- 温馨一言模块 -->
		<view class="motivation-container">
			<view class="motivation-card">
				<view class="motivation-title">今日温馨一言</view>
				<view class="motivation-text">{{ motivation }}</view>
			</view>
		</view>

		<!-- 未来七天天气预报 -->
		<view class="forecast-container">
			<view class="forecast-title">
				<view style="display: flex; align-items: center; justify-content: center; gap: 8px;">
					<i class="qi-104" style="font-size: 23px; color: #1890FF;"></i>
					<text style="line-height: 1;">未来七天天气预报</text>
				</view>
			</view>
			<view class="forecast-cards">
				<view v-for="day in forecastData" :key="day.date" class="forecast-card" @click="toDetails">
					<view class="forecast-date">{{ day.date }}</view>
					<view class="forecast-icon">
						<i :class="['qi-' + day.icon, 'forecast-icon']"></i>
					</view>
					<view class="forecast-details">
						<text class="forecast-temp">{{ day.temp }}℃</text>
						<text class="forecast-text">{{ day.text }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import '@/utils/request.js'
	export default {

		data() {
			return {
				// Example data
				weather: {
					obsTime: '2025-06-05T10:29:28+08:00',
					temp: '25',
					feelsLike: '27',
					icon: '100',
					text: '晴天',
					wind360: '270',
					windDir: '西风',
					windScale: '3',
					windSpeed: '15',
					humidity: '65',
					precip: '0.0',
					pressure: '1005',
					vis: '10.0',
					cloud: '20',
					dew: '15'
				},
				forecastData: [
					// 未来七天天气数据
					{
						date: '2025-06-05',
						icon: '101',
						temp: '28',
						text: '多云',
					},
					{
						date: '2025-06-06',
						icon: '101',
						temp: '28',
						text: '多云',
					},
					{
						date: '2025-06-07',
						icon: '100',
						temp: '30',
						text: '晴天',
					},
					{
						date: '2025-06-08',
						icon: '102',
						temp: '27',
						text: '阴天',
					},
					{
						date: '2025-06-09',
						icon: '300',
						temp: '25',
						text: '小雨',
					},
					{
						date: '2025-06-10',
						icon: '100',
						temp: '29',
						text: '晴天',
					},

				],
				motivation: '🌈🌞 晴空万里，愿你心怀阳光，勇敢追逐梦想，每一步都充满力量！'
			};
		},
		methods: {
			toDetails() {
				console.log('路由跳转')
				uni.switchTab({
					url: '/pages/details/details'
				});
			}
		}
	};
</script>

<style scoped>
	.custom-card {
		border-radius: 10px;
		/* 圆角 */
		border: 1px solid #ebeef5;
		/* 边框颜色 */
		background-color: #fff;
		/* 背景色 */
		box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.15);
		/* 阴影 */
		transition: box-shadow 0.3s;
		/* 悬停动画 */
		margin-bottom: 20px;
		/* 卡片间距 */
		margin: 10px;
	}

	/* 悬停效果 */
	.custom-card:hover {
		box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.15);
		background-color: #E0E0E0;
	}

	/* 卡片内容 */
	.custom-card__body {
		padding: 20px;
		/* 内边距 */
	}

	.temperature-display {
		width: 60%;
		display: flex;
		flex-direction: column;
		/* 使子元素垂直排列 */
		align-items: center;
		/* 水平居中 */
		text-align: center;
	}

	.temp-text {
		width: 100%;
		font-size: 24px;
		font-family: 'Arial', sans-serif;
		font-size: 48px;
		font-weight: 300;
		color: #333;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;

	}

	.reminder-text {
		font-size: 18px;
		/* 提醒文字字体大小 */
	}

	.temperature-display:hover {
		color: #007BFF;
		text-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
	}

	.weather-cards {
		display: flex;
		flex-wrap: wrap;
		/* 允许换行 */
		gap: 16px;
		/* 卡片间距 */
		padding: 12px;
	}

	.weather-card {
		width: calc(50% - 8px);
		/* 一行两个，考虑gap */
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		/* 阴影 */
		padding: 16px;
		display: flex;
		align-items: center;
		transition: transform 0.3s, box-shadow 0.3s;
	}

	.weather-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
		background-color: #E0E0E0;
	}

	.card-icon {
		width: 40px;
		height: 40px;
		margin-right: 12px;
	}

	.weather-icon {
		font-size: 30px;
		/* 图标大小 */
		color: #1890ff;
		/* 图标颜色 */
		vertical-align: middle;
		/* 对齐调整 */
	}

	.card-icons {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40%;
	}

	.weather-icons {
		font-size: 70px;
		/* 图标大小 */
		color: #1890ff;
		/* 图标颜色（蓝色） */
	}

	.card-content {
		display: flex;
		flex-direction: column;
	}

	.card-value {
		font-size: 20px;
		font-weight: bold;
		color: #333;
	}

	.card-label {
		text-align: center;
		font-size: 18px;
		color: #666;
		margin-top: 4px;
	}

	/* 温度与图标水平布局 */
	.weather-display {
		display: flex;
	}

	/* 未来七天天气预报容器 */
	.forecast-container {
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		margin: 20px 0;
		box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
	}

	/* 标题样式 */
	.forecast-title {
		font-size: 20px;
		font-weight: bold;
		color: #333;
		margin-bottom: 10px;
		text-align: center;
	}


	/* 天气卡片容器 */
	.forecast-cards {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
	}

	/* 每天的天气卡片 */
	.forecast-card {
		width: calc(32% - 8px);
		background-color: #fff;
		border-radius: 8px;
		padding: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		text-align: center;
		transition: transform 0.3s, box-shadow 0.3s;
	}

	.forecast-card:hover {
		background-color: #E0E0E0;
		transform: translateY(-4px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

	/* 日期样式 */
	.forecast-date {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 8px;
	}

	/* 天气图标样式 */
	.forecast-icon {
		font-size: 36px;
		color: #1890ff;
		margin-bottom: 8px;
	}

	/* 天气详情样式 */
	.forecast-details {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.forecast-temp {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.forecast-text {
		font-size: 14px;
		color: #666;
	}

	/* 温馨一言容器 */
	.motivation-container {
		background-color: #f9f9f9;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
	}

	/* 温馨一言卡片 */
	.motivation-card {
		background-color: #fff;
		border-radius: 8px;
		padding: 20px;
		text-align: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	/* 标题样式 */
	.motivation-title {
		font-size: 20px;
		font-weight: bold;
		color: #333;
		margin-bottom: 10px;
	}

	/* 鼓励话语样式 */
	.motivation-text {
		font-size: 16px;
		color: #666;
		line-height: 1.5;
		margin-top: 10px;
		font-style: italic;
	}
</style>